<template>
  <div class="juan">
    <el-dialog :title="title" :visible.sync="open" width="65%" append-to-body :before-close="closeDelDialog" >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="卷层" name="0" style="height: 500px;" :disabled='isAdd'>
          <div style=" height: 700px;overflow-y: auto;width:80%;margin: auto;">
            <el-form ref="folderForm" :model="folderForm" :rules="folderRules" label-width="80px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="卷资料号" prop="genNum">
                    <el-select v-model="folderForm.categoryNum" placeholder="请选择" clearable style="width: 240px" @change="getGemNum">
                      <el-option v-for="(dict, index) in categoryNumOption" :key="index" :label="dict.label"
                                 :value="dict.value" />
                    </el-select> -
                    <el-input-number v-model="ziduanStr" controls-position="right" style="width: 240px" :min="1" placeholder="请输入" @change="getGemNum"></el-input-number> -
                    <el-input-number v-model="ziduanEnd" controls-position="right" style="width: 240px" :min="1" placeholder="请输入" @change="getGemNum"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="资料名" prop="genName">
                    <el-input v-model="folderForm.genName" placeholder="请输入" style="width: 85%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="册数" prop="volumeNum">
                    <el-input v-model="folderForm.volumeNum" placeholder="请输入" style="width: 265px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出版单位" prop="publishUnit">
                    <el-input v-model="folderForm.publishUnit" placeholder="请输入" style="width: 265px" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="作者" prop="author">
                    <el-input v-model="folderForm.author" placeholder="请输入" style="width: 265px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出版日期" prop="publishData">
                    <el-date-picker v-model="folderForm.publishData" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" style="width: 265px"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="控制属性" prop="controlType">
                    <el-select v-model="folderForm.controlType" placeholder="请选择" clearable style="width: 265px">
                      <el-option v-for="(dict, index) in this.dict.type.CONTROLTYPE" :key="index" :label="dict.label"
                                 :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资料状况" prop="genStatus">
                    <el-input v-model="folderForm.genStatus" placeholder="请输入" style="width: 265px" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="folderForm.remark" type="textarea" placeholder="请输入" style="width: 85%" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="卷内件层" name="1" :disabled='disabled'>
          <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch"
                   label-width="68px">
            <el-form-item label="资料名" prop="genNume">
              <el-input v-model="queryParams.genNume" placeholder="请输入资料名" style="width: 240px" clearable/>
            </el-form-item>
            <el-form-item label="日期" prop="dateRange">
              <el-date-picker v-model="dateRange" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="关键字" prop="keywords">
              <el-input v-model="queryParams.keywords" placeholder="请输入关键字" style="width: 240px" clearable/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8" ref="refbut">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" @click="handledeitTap(0)">著录</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="success" plain icon="el-icon-edit" @click="handledeitTap(1)">修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" plain icon="el-icon-delete" @click="handleDeleteTap">删除</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" @row-dblclick="rowdblclick" height="500">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" sortable align="center" type="index" prop="id" />
                <el-table-column label="资料号" align="center" prop="fileNum" :show-overflow-tooltip="true" />
                <el-table-column label="资料名" align="center" prop="genNume" :show-overflow-tooltip="true" />
                <el-table-column label="出版单位" align="center" prop="publishUnit" :show-overflow-tooltip="true" />
                <el-table-column label="作者" align="center" prop="author" :show-overflow-tooltip="true" />
                <el-table-column label="出版时间" align="center" prop="publishData" :show-overflow-tooltip="true" />
                <el-table-column label="页号" align="center" prop="pageHouse" :show-overflow-tooltip="true" />
                <el-table-column label="页数" align="center" prop="pageNum" :show-overflow-tooltip="true" />
                <el-table-column label="控制属性" align="center" prop="controlType" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span v-for="(i, idx) in dict.type.CONTROLTYPE" :key="idx">
                      {{ scope.row.controlType == i.value ? i.label : '' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
                <el-table-column label="资料状况" align="center" prop="genStatus" :show-overflow-tooltip="true" />
              </el-table>
              <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                          :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDelDialog">取消</el-button>
        <el-button type="primary" @click="submitDetail()" v-if="activeName == 0">确定</el-button>
        <el-button type="primary" @click="submitDetail1" v-if="activeName == 1">确定</el-button>
      </div>
    </el-dialog>

    <jiandeit v-if="jianOpen" :open="jianOpen" :openInfo="openFileInfo" @closeDelDialog="closeDelDialogJian"
              @submitDetail="submitDetailJian"  ref="refDeit"></jiandeit>

    <!-- 件详情 start -->
    <JianDetail v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="dataInfoCell2"
                @detailsHandleClose="detailsHandleClose"></JianDetail>
    <!-- 件详情 end -->
  </div>
</template>

<script>
import {
  addFolder, deleteFile,
  getCategoryNum, getFileDetail,
  getFileList,
  getFolderDetail,
  updateFolder
} from "@/api/information/receivingManagement";
import Jiandeit from "@/views/information/receivingManagement/jianedit";
import JianDetail from "@/views/information/receivingManagement/jianDetail";

export default {
  name: "juanedit",
  components: { Jiandeit, JianDetail},
  props: ["open", "openInfo"],
  archive_Dicts: ['CONTROLTYPE'],
  data() {
    const checkGenNum = (rule, value, callback) => {
      if (value) {
        var reg = value.split('-')
        if (reg.includes('undefined')){
          callback(new Error('请输入全部卷资料号'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      // 标题
      title: '',
      activeName: "0",
      disabled: true, //判断著录卷之后才可以著录卷内件
      isAdd: false,
      tableHeight: "",
      folderForm: {
        genNum: undefined,
        categoryNum: undefined,
        genName: undefined,
        volumeNum: undefined,
        publishUnit: undefined,
        author: undefined,
        publishData: undefined,
        controlType: undefined,
        genStatus: undefined,
        remark: undefined
      },
      ziduanStr: undefined,
      ziduanEnd: undefined,
      folderRules: {
        genNum: [
          { required: true, message: "请输入卷资料号" },
          { required: true, validator: checkGenNum }
        ],
        genName: [
          { required: true, message: "请输入卷资料名" }
        ],
        controlType:  [
          { required: true, message: "请输入控制属性" }
        ]
      },
      categoryNumOption: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keywords: undefined,
        genNume: undefined
      },
      dateRange: [],
      total: 0,
      loading: true,
      dataList: [],
      jianOpen: false,
      openFileInfo: {},
      showSearch: true,
      jianDetailsOpen: false,
      dataInfoCell2: {}
    }
  },
  watch: {
    openInfo: {
      handler(valNew) {
        console.log(valNew, '----------')
        getCategoryNum({treeCode: valNew.treeCode}).then(response=>{
          this.categoryNumOption = response.data.map(item => ({
            label: item,
            value: item
          }));
        })
        this.folderForm.treeId = valNew.treeId
        this.getList()
        if (valNew.ids == undefined) { //添加
          this.title = '卷著录'
          this.text = "著录成功";
        } else {
          this.title = '卷修改'
          this.text = "修改成功";
          this.openFileInfo.folderId = this.openInfo.ids
          this.queryParams.folderId = this.openInfo.ids
          //修改
          this.getUpdatefieldPost(valNew);
          //修改
          this.disabled = false;
        }
      },
      immediate: true
    }
  },
  methods: {
    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.dateRange != null) {
        this.queryParams['params["beginPublishData"]'] = this.dateRange[0];
        this.queryParams['params["endPublishData"]'] = this.dateRange[1];
      } else {
        this.queryParams['params["beginPublishData"]'] = undefined;
        this.queryParams['params["endPublishData"]'] = undefined;
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams['params["beginPublishData"]'] = undefined;
      this.queryParams['params["endPublishData"]'] = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //动态设置table的高度
    tableHeightData() {
      this.$nextTick(
        () => {
          let h = 650;

          //  h = h + 100
          if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
            h = h - this.$refs.queryForm.$el.offsetHeight
          }

          if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
            h = h - this.$refs.refbut.$el.offsetHeight
          }
          this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
          return h
        }
      )
    },
    getGemNum() {
      this.folderForm.genNum = this.folderForm.categoryNum + '-' + this.ziduanStr + '-' + this.ziduanEnd
    },
    //切换
    handleClick() {
      this.getList()
      this.tableHeightData();
    },
    //关闭
    closeDelDialog() {
      // this.$modal.closeLoading()
      this.$emit("closeDelDialog")
    },
    getUpdatefieldPost(valNew) {
      getFolderDetail(valNew.ids).then(response=>{
        this.folderForm = response.data
        var ziduan = response.data.genNum.split('-')
        this.ziduanStr = ziduan[1]
        this.ziduanEnd = ziduan[2]
        this.openFileInfo.folderNum = this.folderForm.genNum
      })
    },
    //确定
    submitDetail(val) {
      this.$refs["folderForm"].validate(valid => {
        if (valid) {
          if (this.openInfo.ids == undefined) { // 著录
            addFolder(this.folderForm).then(response=>{
              this.activeName = "1" //校验通过设置
              this.disabled = false //判断著录卷之后才可以著录卷内件
              this.isAdd = true
              this.queryParams.folderId = response.msg
              this.openFileInfo.folderId = response.msg
              this.openFileInfo.folderNum = this.folderForm.genNum
              this.getList()
              this.$modal.msgSuccess("著录成功");
              this.text = "著录成功";
            })
          } else { // 修改
            updateFolder(this.folderForm).then(response=>{
              this.activeName = "1" //校验通过设置
              this.disabled = false //判断著录卷之后才可以著录卷内件
              this.isAdd = true
              this.queryParams.folderId = this.openInfo.ids
              this.openFileInfo.folderNum = this.folderForm.genNum
              this.getList()
              this.$modal.msgSuccess("修改成功");
              this.text = "修改成功";
            })
          }
        }
      })
    },

    submitDetail1() {
      this.$modal.msgSuccess(this.text);
      this.$emit("submitDetail")
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    getList() {
      this.loading = true
      getFileList(this.queryParams).then(response=>{
        this.dataList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 著录/修改件
    handledeitTap(e) {
      this.openFileInfo.controlType = this.folderForm.controlType
      if (e == 1) {  //修改
        if (this.ids == undefined) {
          this.$message({ message: '请选择要修改的数据哦', type: 'warning' })
          return false
        }
        if (this.single) {
          this.$message({ message: '请选择一条要修改的数据哦', type: 'warning' })
          return false
        }
        this.openFileInfo.ids = this.ids.toString()  //添加完将返回的卷ID存起来，再次提交的时候调用修改接口
      } else {
        this.openFileInfo.ids = undefined  //添加完将返回的卷ID存起来，再次提交的时候调用修改接口
      }
      this.jianOpen = true;
    },

    // 件删除
    handleDeleteTap() {
      if (this.ids != undefined && !this.multiple) {
        this.$modal.confirm('是否确认删除所选数据项？').then(function () {
        }).then(() => {
          deleteFile(this.ids).then(response=>{
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
        })
      } else {
        this.$message({ message: '请选择要删除的数据哦', type: 'warning' })
      }
    },

    //关闭卷内件层著录
    closeDelDialogJian() {
      this.jianOpen = false;
      this.tableHeightData();
      this.getList()
    },

    //著录件层确定提交事件
    submitDetailJian() {
      this.jianOpen = false;
      this.isAdd=true; //著录完卷内件 禁用卷层
      this.openFileInfo.folderId = this.queryParams.folderId;
      this.getList();
      this.tableHeightData();
    },

    rowdblclick(row) {
      getFileDetail(row.id).then(response=>{
        const tableColumns = [
          { label: '资料号', prop: 'fileNum' },
          { label: '资料名', prop: 'genNume' },
          { label: '出版单位', prop: 'publishUnit' },
          { label: '作者', prop: 'author' },
          { label: '出版时间', prop: 'publishData' },
          { label: '页号', prop: 'pageHouse' },
          { label: '页数', prop: 'pageNum' },
          { label: '控制属性', prop: 'controlType' },
          { label: '密级', prop: 'mj' },
          { label: '备注', prop: 'remark' },
          { label: '资料状况', prop: 'genStatus' },
        ]
        for (let i = 0; i < tableColumns.length; i++) {
          tableColumns[i].value = response.data[tableColumns[i].prop]
        }
        console.log(response.data, tableColumns)
        this.dataInfoCell2 = response.data
        this.dataInfoCell2.tableColumns = tableColumns
        this.$nextTick(() => {
          this.jianDetailsOpen = true
        })
      })
    },
    //关闭详情页面
    detailsHandleClose() {
      this.jianDetailsOpen = false;
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin: 20px auto 0 !important;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px !important;
}

::v-deep .el-tabs__content {
  overflow: visible;
}

.el-tabs {
  height: 770px;
}

::v-deep .leftMain {
  overflow: auto;
  height: 670px;
}
</style>
